<template>
    <div>
        <jgsearch
            :searchData="searchData"
            @on-input="searchaskData"
            @on-change-change="changeaskData"
            @on-change-Radio="changeRadio"
            @on-change-Checkbox="changeCheckbox"
            @on-change-Date="changeDate"
        >
        </jgsearch>
        <jgtable
            :data="list"
            :params="params"
            :columns="columns"
            :loading="loading"
            :total="total"
            @askData="askData"
            @handleSound="handleSound"
            @handleContactClue="handleContactClue"></jgtable>
        <Modal title="听录音" v-model="sound" :mask-closable="false" width="360" footer-hide @on-cancel="cancel">
            <audio :src="musicurl" controls id="audio" v-if="musicurl != ''"></audio>
            <div v-else>暂无录音</div>
            <div v-if="musicurl != ''" style="margin-top: 10px;">
                播放倍速：
                <RadioGroup v-model="model" @on-change="changeaudio(model1)">
                    <Radio :label="item.id" v-for="item in RadioGroup" :key="item.id">{{ item.name }}</Radio>
                </RadioGroup>
            </div>
        </Modal>
    </div>
</template>

<script>
import jgsearch from '../components/search'
import jgtable from '../components/table'
import mixin from "../components/mixin";
import {
    cluecallselectinfo,
    cluecalllist,
    cluecallcontact,
    getCluecallcontact,
} from "@api/hqapi/indexone";
import {
    patientindexsearchcity, repeatCallData,
    patientindexsearchmobile
} from "@api/hqapi";
export default {
    name: 'call', // 来电
    mixins: [mixin],
    components: { jgsearch, jgtable },
    props: {
        booltimeButton: { type: Boolean, default: true },
        clue_status_id: { type: [String, Number], default: '' },
        ceshiButton: { type: Boolean, default: false },
        columnsHeader: { type: [String, Number], default: 0 },
        customer: { type: Boolean, default: false },
    },

    data() {
        const options = { disabledDate(date) { return date && date.valueOf() > Date.now() }}
        return {
            searchData: {
                left: [
                    { id: 0, key: "Input", clearable: true, placeholder: "请输入手机号", value: "" },
                    { id: 11, style: {width: '100px'}, key: "Select", clearable: true, placeholder: "部门", value: "", childList: [], callback: "change" },
                    { id: 12, style: {width: '100px'}, key: "Select", clearable: true, placeholder: "设备别名", value: "", childList: [], callback: "change", show: { show: false }},
                    { id: 13, style: {width: '100px'}, key: "Select", clearable: true, placeholder: "来电状态", value: "", childList: [{ value: 1, label: "已接听" }, { value: 0, label: "未接听" }], callback: "change" },
                    { id: 14, style: {width: '100px'}, key: "Select", clearable: true, placeholder: "联系人员", value: "", childList: [], callback: "change" },
                    { id: 0, key: "DatePicker", type: "daterange", options: options, placeholder: "请选择来电日期", value: [new Date(),new Date()], callback: "Date" },
                    { id: 0, key: "RadioGroup", show: { show: true }, type:'button', value: 10, childList: [{ label: '近10天', value: 10 },{ label: '近30天', value: 30 },{ label: '近90天', value: 90 }], callback: "Radio"},
                    { id: 0, key: "CheckboxGroup", value: [], childList: [{ label: '重复', value: 1 },{ label: '测试', value: 3, show: true }], callback: "Checkbox" }
                ],
            },
            columns: [
                    { title: "来电号码", fixed: "left", slot: "callcalled_tel", width: 120 },
                    { title: "归属部门", key: "department_name", width: 100 },
                    { title: "设备别名", key: "device_name", width: 130 },
                    { title: "通话时长", key: "duration_str", width: 100 },
                    { title: "来电时间", key: "call_time", width: 168 },
                    { title: "来电状态", slot: "callState", width: 100 },
                    { title: "处理时间", key: "deal_time", width: 150 },
                    { title: "联系人员", key: "operation_name", minWidth: 120, ellipsis: true, tooltip: true },
                    { title: "备注", key: "customer_remark", minWidth: 150 },
                    { title: "操作", key: "operation", slot: "calloperation", fixed: "right", width: 180 },
                ],
            params: {
                page: 1,
                pageSize: 10,
                mobile: "",
                clue_status_id: "",
                wechatid: "",
                department_id: "",
                is_call: "",
                have_repeat: 0,
                operation_id: "",
                start_time: new Date(),
                end_time: new Date(),
            },
            musicurl: '',
            sound: false,
            // 音频倍数
            RadioGroup: [
                { id: 0.5, name: "0.5" },
                { id: 0.75, name: "0.75" },
                { id: 1, name: "1.0" },
                { id: 1.5, name: "1.5" },
                { id: 1.75, name: "1.75" },
                { id: 2, name: "2.0" },
            ],
            model: 1,
        };
    },

    mounted() {
        cluecallselectinfo().then((res) => {
            this.device = res.device
            this.searchData.left.forEach((item) => {
                if (item.id === 11) {
                    item.childList = res.department;
                } else if (item.id === 12) {
                    item.childList = res.operation_member;
                } else if (item.id === 14) {
                    item.childList = res.operation_member;
                }
            });
        });
    },

    methods: {
        // 初始化
        initial() {
            this.initials()
        },
        askData() {
            this.loading = true
            this.getparams()
            cluecalllist(this.params).then((res) => {
                this.list = Object.freeze(res.list);
                this.total = res.total;
                let params = { key: 'call', total: res.total }
                this.$emit('returntotal', params);
                this.loading = false
            });
        },
        // 听录音
        handleSound(row) {
            this.musicurl = row.record_url;
            this.sound = true;
        },
        // 取消听录音
        cancel() {
            const audio = document.getElementById("audio");
            if (this.musicurl !== "") {
                audio.pause();
            }
            this.musicurl = "";
            this.model1 = 1;
        },
        // 调整音频倍数
        changeaudio(model) {
            const audio = document.getElementById("audio");
            audio.playbackRate = model;
        },
    },
};
</script>

<style lang="scss" scoped>

</style>